<template>
  <!-- 自动推导 -->
  <h3>自动推导</h3>
  <p>{{ name }}</p>
  <!-- 传入对象 -->
  <p>{{ user }}</p>
  <h4>显式标注类型</h4>
  <p>{{ person }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'
defineOptions({ name: 'PageRef' })
// 自动推导
const name = ref('this is name')
name.value = 'this is new name'
// 传入对象
const user = ref({
  name: 'chaichai',
  age: 18
})
//显式标注类型
type Person = {
  name: string
  age?: number
}

// 限制ref初始值的类型
const person = ref<Person>({
  name: '',
  age: 0
})

// 限制修改.value时新值的类型
person.value = {
  name: 'jack',
  age: 10
}
</script>

<style lang="scss" scoped></style>
